<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .wrap {
            margin: 120px 0 0 240px;
            width: 75px;
            height: 75px;
            position: relative;
        }

        .round {
            position: absolute;
            width: 13px;
            height: 13px;
            border-radius: 50%;
            background-color: rgb(241, 141, 157);
            /* 动画效果 */
            animation: circleRound 2.8s ease infinite;
            /* 设置旋转中心，*/
            transform-origin: 50% 75px;
        }

        .round:nth-child(1) {
            z-index: 7;
        }

        .round:nth-child(2) {
            height: 12px;
            width: 12px;
            background-color: rgb(199, 136, 185);
            animation-delay: .2s;
            z-index: 6;
        }
        .round:nth-child(3) {
            height: 11px;
            width: 11px;
            background-color: rgb(153, 69, 223);
            animation-delay: .4s;
            z-index: 5;
        }
        .round:nth-child(4) {
            height: 10px;
            width: 10px;
            background-color: rgb(69, 141, 223);
            animation-delay: .6s;
            z-index: 4;
        }

        .round:nth-child(5) {
            height: 9px;
            width: 9px;
            background-color: rgb(69, 223, 203);
            animation-delay: .8s;
            z-index: 3;
        }

        .round:nth-child(6) {
            height: 8px;
            width: 8px;
            background-color: rgb(100, 223, 69);
            animation-delay: 1s;
            z-index: 2;
        }

        .round:nth-child(7) {
            height: 7px;
            width: 7px;
            background-color: rgb(223, 200, 69);
            animation-delay: 1.2s;
            z-index: 1;
        }

        @keyframes circleRound {
            to {
                transform: rotate(1turn);
            }
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="round"></div>
        <div class="round"></div>
        <div class="round"></div>
        <div class="round"></div>
        <div class="round"></div>
        <div class="round"></div>
        <div class="round"></div>
    </div>
</body>
</html>